<template>
	<!-- 银行卡 -->
	<view class="bigbox">
		<u-empty text="暂无银行卡" marginTop="100" v-if="!bankList.length"></u-empty>
		<view class="box" v-for="(item,index) in bankList" :key="index">
			<!-- 盒子每一项 -->
			<view class="box-item pt24 pl40 pr36 flex row-column row-between pb60 mt26">
				<!-- 顶部盒子 -->
				<view class="box-item-header flex row-between col-center">
					<view class="box-item-header-l flex col-center">
						<image src="/static/img/index/7pay-jianshe.png" class="w50 h50 mr16"></image>
						<text>{{item.bank_name}}</text>
					</view>
					<view class="box-item-header-r flex ">
						<view class="flex mr48 col-center" @tap="$jump(`/pages/my/myWallet/bankCard/addBankCard/addBankCard?detail=${JSON.stringify(item)}`)">
							<image src="/static/img/my/4card-edit.png" class="w50 h50 mr10"></image>
							<text>编辑</text>
						</view>
						<view class="flex col-center" @tap="deleteBank(item)">
							<image src="/static/img/my/4card-de.png" class="w50 h50 mr10"></image>
							<text>删除</text>
						</view>
					</view>
				</view>
				<!-- /顶部盒子 -->

				<!-- 卡号盒子 -->
				<view class="mt86 flex row-around boxNum col-center">
					<!-- <text>****</text>
					<text>****</text>
					<text>****</text> -->
					<text>{{item.bank_card_no}}</text>
				</view>
				<!-- //卡号盒子 -->

			</view>
			<!-- /盒子每一项 -->
		</view>
		<view class="mr56 h86 paybtn" @tap="$jump('/pages/my/myWallet/bankCard/addBankCard/addBankCard')">
			添加银行卡
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankList:[]
			};
		},
		onShow() {
			this.bank()
		},
		methods: {
			deleteBank(item){
				this.$api.delBankCard({id:item.id}).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							this.bank()
						}, 1000)
					}
				})
			},
			bank() {
				this.$api.bankCardList().then(res => {
					if (res.code == 1) {
						this.bankList = res.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.paybtn {
		width: 80%;
		position: fixed;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 99;
	}

	.box-item {
		border-radius: 20rpx 20rpx 0px 0px;
		background: url('~@/static/img/my/4card-1.png') no-repeat;
		background-size: 100% 100%;

		.box-item-header {
			.box-item-header-l {
				text {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.box-item-header-r {
				text {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.boxNum {
			text {
				font-size: 42rpx;
				font-family: Source Han Sans CN;
				color: #FFFFFF;
			}
		}
	}
</style>
